<template>
  <view class="container">
    <!-- 标题 -->
    <view class="page-title">服务地址</view>
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form :model="form" ref="uForm" label-width="140rpx">
        <u-form-item label="姓名" prop="name">
          <u-input v-model="form.name" placeholder="请输入收货人姓名" />
        </u-form-item>
        <u-form-item label="电话" prop="phone">
          <u-input v-model="form.phone" placeholder="请输入收货人手机号" />
          <template slot="right">
            <button
              class="themecolor btn-normal"
              type=""
              open-type="getPhoneNumber"
              @getphonenumber="handelMpWeixinMobileLogin($event)"
              @click="clickPhoneNumber"
            >
              一键填写
            </button>
          </template>
        </u-form-item>
        <u-form-item label="地区" prop="region">
          <select-region v-model="form.region" />
        </u-form-item>
        <u-form-item label="详细地址" prop="detail" :border-bottom="false">
          <u-input v-model="form.detail" placeholder="街道门牌、楼层等信息" />
        </u-form-item>
        <u-form-item label="门牌号" prop="menpaihao" :border-bottom="false">
          <u-input v-model="form.menpaihao" placeholder="门牌号信息" />
        </u-form-item>
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view
          class="btn-item btn-item-main"
          :class="{ disabled }"
          @click="handleSubmit()"
          >保存</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import SelectRegion from "@/components/select-region/select-region";
import { isMobile } from "@/utils/verify";
import * as AddressApi from "@/api/address";
import * as CheckoutApi from "@/api/checkout";
// 表单字段元素
const form = {
  name: "",
  phone: "",
  region: [],
  detail: "",
  menpaihao: "",
};

// 表单验证规则
const rules = {
  name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: ["blur", "change"],
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: ["blur", "change"],
    },
    {
      // 自定义验证函数
      validator: (rule, value, callback) => {
        // 返回true表示校验通过，返回false表示不通过
        return isMobile(value);
      },
      message: "手机号码不正确",
      // 触发器可以同时用blur和change
      trigger: ["blur"],
    },
  ],
  region: [
    {
      required: true,
      message: "请选择省市区",
      trigger: ["blur", "change"],
      type: "array",
    },
  ],
  detail: [
    {
      required: true,
      message: "请输入详细地址",
      trigger: ["blur", "change"],
    },
  ],
  menpaihao: [
    {
      required: true,
      message: "请输入门牌号",
      trigger: ["blur", "change"],
    },
  ],
};

export default {
  components: {
    SelectRegion,
  },
  data() {
    return {
      form,
      rules,
      // 按钮禁用
      disabled: false,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // tt.getLocation({
    //   type: 'gcj02', // 默认为 wgs84，返回 gps 坐标
    //   success(res) {
    //     // 处理成功获取位置信息
    //     console.log(res);
    //     console.log(res.longitude);
    //   },
    //   fail(err) {
    //     // 处理失败情况
    //     console.error('获取位置信息失败',err);
    //   }
    // });
  },

  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },

  methods: {
    async clickPhoneNumber() {
      this.code = await this.getCode();
      console.log(this.code);
    },
    getCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "tuotiao",
          success: (res) => {
            console.log("code", res.code);
            resolve(res.code);
          },
          fail: reject,
        });
      });
    },
    async handelMpWeixinMobileLogin({ detail }) {
      const app = this;
      if (detail.errMsg != "getPhoneNumber:ok") {
        console.log("抖音授权获取手机号失败", detail.errMsg);
        // app.$error(detail.errMsg)
        return;
      }

      detail["code"] = app.code;
      console.log(detail);
      CheckoutApi.getphone(detail)
        .then((result) => {
          console.log(result);
          app.form.phone = result.data.phone.phoneNumber;
        })
        .catch((err) => err);
    },
    // 表单提交
    handleSubmit() {
      const app = this;
      if (app.disabled) {
        return false;
      }
      app.$refs.uForm.validate((valid) => {
        if (valid) {
          app.disabled = true;
          AddressApi.add(app.form)
            .then((result) => {
              app.$toast(result.message);
              uni.navigateBack();
            })
            .finally(() => (app.disabled = false));
        }
      });
    },
  },
};
</script>

<style>
page {
  background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.page-title {
  width: 94%;
  margin: 0 auto;
  padding-top: 40rpx;
  font-size: 28rpx;
  color: rgba(69, 90, 100, 0.6);
}

.form-wrapper {
  margin: 20rpx auto 20rpx auto;
  padding: 0 40rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
}

/* 底部操作栏 */

.footer {
  margin-top: 60rpx;

  .btn-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    border-radius: 50rpx;
  }

  .btn-item-main {
    background: linear-gradient(to right, #f9211c, #ff6335);

    // 禁用按钮
    &.disabled {
      background: #ff9779;
    }
  }
}
.btn-normal {
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}
</style>
